<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content  :native-scrollbar="false" title="提交转账" closable>
            <n-space vertical :size="12">
                <n-alert title="提示" type="warning">您将对以下提现申请进行转账操作</n-alert>
                <n-list bordered>
                    <n-list-item v-for="item in items">
                        <n-space>
                            <n-text code>{{ item.id }}</n-text>
                            <n-text>{{ item.apply.mob }}</n-text>
                            <n-text>{{ item.apply.name }}</n-text>
                            <n-text>{{ item.payee.name }}</n-text>
                            <n-text>{{ (item.value / 100).toFixed(2) }}</n-text>
                        </n-space>
                    </n-list-item>
                </n-list>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                    <n-button type="warning" :loading="loading" @click="execSubmit">
                        <template #icon>
                            <n-icon :component="CheckRound" />
                        </template>
                        提交转账
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, onBeforeMount } from 'vue'
import { CloseRound, CheckRound } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'
const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 720))

const { $notification: notification } = window

const loading = ref(false)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    items: {
        type: Array as PropType<any[]>,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const execSubmit = () => {
    loading.value = true
    let param = { ids: prop.items.map((v: any) => v.id) }
    Http.post('/ops/fin/withdraw/tran', param).then(resp => {
        if (resp.stat.err > 0) {
            loading.value = false
            return
        }
        emit('refresh', {})
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功提交转账请求',
        })
        setTimeout(() => {
            loading.value = false
            emit('update:show', false)
        }, 200)
    })
}
</script>
